<template>
  <el-dialog v-model="dialogVisible" title="新增/编辑" width="620" draggable>
    <div>
      <el-form
        ref="ruleFormRef"
        :model="formInline"
        label-width="auto"
        class="demo-ruleForm"
        size="small"
        status-icon
      >
        <el-tabs type="card">
          <el-tab-pane label="管理信息">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="编号">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入编号"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入姓名"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入性别"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="简码">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入简码"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="签名">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入签名"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="执业类别">
                  <el-select
                    v-model="formInline.region"
                    placeholder="请选择执业类别"
                    clearable
                  >
                    <el-option label="Zone one" value="shanghai" />
                    <el-option label="Zone two" value="beijing" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="执业范围">
                  <div
                    style="
                      width: 100%;
                      height: 96px;
                      overflow-y: auto;
                      border: 1px solid #dcdfe6;
                      border-radius: 4px;
                      padding-left: 4px;
                    "
                  >
                    <el-checkbox-group v-model="formInline.type">
                      <el-checkbox value="1" name="type">内科专业</el-checkbox>
                      <el-checkbox value="1" name="type">外科专业</el-checkbox>
                      <el-checkbox value="1" name="type"
                        >妇产科专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type">儿科专业</el-checkbox>
                      <el-checkbox value="1" name="type"
                        >眼耳鼻咽喉科专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >皮肤病与性病专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >精神卫生专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >职业病专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >医学检验，病理专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >全科医学专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >急救医学专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >康复医学专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >预防保健专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >计划生育技术服务专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type">骨科专业</el-checkbox>
                      <el-checkbox value="1" name="type"
                        >口腔科专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >公共卫生类别专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type">中医专业</el-checkbox>
                      <el-checkbox value="1" name="type"
                        >中西医结合专业</el-checkbox
                      >
                      <el-checkbox value="1" name="type">蒙医专业</el-checkbox>
                      <el-checkbox value="1" name="type">藏医专业</el-checkbox>
                      <el-checkbox value="1" name="type">维医专业</el-checkbox>
                      <el-checkbox value="1" name="type">傣医专业</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="管理职务">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入资格证号"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="专业技术服务">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入资格证号"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="资格证号">
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      width: 100%;
                    "
                  >
                    <el-input
                      v-model="formInline.name"
                      style="width: 100px"
                      placeholder="清输入资格证号"
                      clearable
                    />
                    <el-checkbox
                      v-model="formInline.checked5"
                      label="精麻处方权"
                      size="small"
                    />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="执业证号">
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      width: 100%;
                    "
                  >
                    <el-input
                      v-model="formInline.name"
                      style="width: 100px"
                      placeholder="清输入执业证号"
                      clearable
                    />
                    <el-checkbox
                      v-model="formInline.checked5"
                      label="处方权"
                      size="small"
                    />
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="工作性质">
                  <div
                    style="
                      width: 100%;
                      height: 96px;
                      overflow-y: auto;
                      border: 1px solid #dcdfe6;
                      border-radius: 4px;
                      padding-left: 4px;
                    "
                  >
                    <el-checkbox-group v-model="formInline.type">
                      <el-checkbox value="1" name="type"
                        >门诊挂号员</el-checkbox
                      >
                      <el-checkbox value="1" name="type">外科专业</el-checkbox>
                      <el-checkbox value="1" name="type"
                        >门诊收费员</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >预交收款员</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >住院结账员</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >药房发药人</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >入院登记员</el-checkbox
                      >
                      <el-checkbox value="1" name="type"
                        >发卡登记人</el-checkbox
                      >
                      <el-checkbox value="1" name="type">医生</el-checkbox>
                      <el-checkbox value="1" name="type">护士</el-checkbox>
                      <el-checkbox value="1" name="type">质控医师</el-checkbox>
                      <el-checkbox value="1" name="type">指控护士</el-checkbox>
                      <el-checkbox value="1" name="type">编码员</el-checkbox>
                      <el-checkbox value="1" name="type">进修医师</el-checkbox>
                      <el-checkbox value="1" name="type">实习医师</el-checkbox>
                      <el-checkbox value="1" name="type">麻醉医师</el-checkbox>
                      <el-checkbox value="1" name="type">检验</el-checkbox>
                      <el-checkbox value="1" name="type">检查</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="所属部门">
                  <el-select
                    v-model="formInline.region"
                    placeholder="请选择科别"
                    clearable
                  >
                    <el-option label="Ⅰ类" value="1" />
                    <el-option label="Ⅱ类" value="2" />
                    <el-option label="Ⅲ类" value="3" />
                    <el-option label="Ⅳ类" value="4" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="执业时间">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入资格证号"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="抗菌药物权限">
                  <el-select
                    v-model="formInline.region"
                    placeholder="请选择科别"
                    clearable
                  >
                    <el-option label="Ⅰ类" value="1" />
                    <el-option label="Ⅱ类" value="2" />
                    <el-option label="Ⅲ类" value="3" />
                    <el-option label="Ⅳ类" value="4" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="聘任职务">
                  <el-select
                    v-model="formInline.region"
                    placeholder="请选择科别"
                    clearable
                  >
                    <el-option label="Ⅰ类" value="1" />
                    <el-option label="Ⅱ类" value="2" />
                    <el-option label="Ⅲ类" value="3" />
                    <el-option label="Ⅳ类" value="4" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="详细情况">
            <el-row :gutter="20">
              <el-col :span="14">
                <el-form-item label="民族" label-width="130px">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入民族"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="身份证号" label-width="130px">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入资格证号"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="出生日期" label-width="130px">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入资格证号"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="学历" label-width="130px">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入资格证号"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="所学专业" label-width="130px">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入资格证号"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="参加工作日期" label-width="130px">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入资格证号"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="电话号码" label-width="130px">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入资格证号"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="国家医保医生护士代码" label-width="132px">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入资格证号"
                    clearable
                  />
                </el-form-item>
                <el-form-item label="Email" label-width="130px">
                  <el-input
                    v-model="formInline.name"
                    placeholder="清输入资格证号"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="上传照片" label-width="60px">
                  <el-upload
                    class="avatar-uploader"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"
                      ><Plus
                    /></el-icon>
                  </el-upload>
                </el-form-item>
                <el-form-item label="签名图片" label-width="60px">
                  <el-upload
                    class="avatar-uploader"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"
                      ><Plus
                    /></el-icon>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="上级医师" label-width="130px">
                  <el-select
                    v-model="formInline.region"
                    placeholder="请选择科别"
                    clearable
                  >
                    <el-option label="Ⅰ类" value="1" />
                    <el-option label="Ⅱ类" value="2" />
                    <el-option label="Ⅲ类" value="3" />
                    <el-option label="Ⅳ类" value="4" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="个人简介" label-width="130px">
                  <el-input v-model="formInline.desc" type="textarea" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="擅长" label-width="130px">
                  <el-input v-model="formInline.desc" type="textarea" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">关闭</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
          style="color: #fff"
          color="#20B1EB"
          size="small"
          >确认</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
const formInline = {
  id: 1,                //  id
  name: "李云",         // 姓名
  gender: "女",         // 性别
  number: "NYK",        // 编号
  code: "0101",         // 
  managementPosition: "无", // 管理职务
  technicalService: "无",   // 专业技术服务
  antibacterialPermissions: "有",   // 抗菌药物权限
  appointmentAuthority: "无",   // 聘任药物权限
  appointment: "无",            // 聘任技术服务
  birthDate: "2024-04-11",      // 出生日期
  card: "42356666666666669999", // 身份证
  nation: "汉",                 // 民族
  educationalBackground: "本科",  // 学历
  belonging: "住院部",            // 所属
  putDate: "2024-04-11",          // 建档日期
  tel: "0731-88888888",           // 办公室电话
};
const tableData = [
  {
    name: "临床",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "治疗",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "护理",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "西药房",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "成药房",
    state: "住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
  {
    name: "领药部门",
    state: "门诊/住院病人",
    city: "直接给病人诊断并决定治疗方案的部门，按照服务对象分为门诊科室等等。",
  },
];
const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
};

defineExpose({ openDialog });
</script>

<style lang="scss" scoped>
</style>
